<template>
  <!--评论列表页面使用伸缩布局flex，需要在最高父元素定义伸缩模型，且方向是垂直向上
    目的是使评论列表的滚动区域初始化要有个固定的高度，这个高度是使用伸缩布局分配父元素剩余的空间，
    这样滚动才有效！
  -->
     <section class="rating_container">
       <header class="rating_header">
         <section class="rating_header_left">
           <p>{{shopDetailData.rating}}</p>
           <p>综合评价</p>
           <p>高于周边商家{{(ratingScoresData.compare_rating*100).toFixed(1)}}%</p>
         </section>
          <section class="rating_header_right" v-if="showdom">
            <p>
              <span>服务态度</span>
                <yd-cell-item>
                  <yd-rate slot="left" v-model="rate1" color="#ff9a0d"></yd-rate>
                </yd-cell-item>
              <span class="rating_num">{{ratingScoresData.service_score.toFixed(1)}}</span>
            </p>
            <p>
              <span>菜品评价</span>
              <yd-cell-item>
                <yd-rate slot="left" v-model="rate2" color="#f60"></yd-rate>
              </yd-cell-item>
              <span class="rating_num">{{ratingScoresData.food_score.toFixed(1)}}</span>
            </p>
            <p>
              <span>送达时间</span>
              <span class="delivery_time">{{shopDetailData.order_lead_time || 18}}分钟</span>
            </p>
          </section>
       </header>
       <ul class="tag_list_ul">
         <li v-for="(item, index) in ratingTagsList" :key="index" :class="{unsatisfied: item.unsatisfied, tagActivity: ratingTageIndex == index}" @click="changeTgeIndex(index, item.name)">{{item.name}}({{item.count}})</li>
       </ul>
       <div class="scroll-container">
         <scroll class="rating-wrapper" :data="ratingList" @scrollToEnd="loaderMore"  @scroll="scrollFun" :pullup="pullup" :probe-type="probeType" :listen-scroll="listenScroll" >
           <ul class="rating_list_ul">
             <li class="rating_list_li" v-for="(item,index) in ratingList" :key="index">
               <img :src="getImgPath(item.avatar)" class="user_avatar">

               <section class="rating_list_details">
                 <header>
                   <section class="username_star">
                     <p class="username">{{item.username}}</p>
                     <p class="star_desc">
                       <yd-cell-item>
                         <yd-rate slot="left" v-model='item.rating_star' color="#ff9a0d"></yd-rate>
                       </yd-cell-item>
                       <!--<rating-star :rating='item.rating_star'></rating-star>-->
                       <span class="time_spent_desc">{{item.time_spent_desc}}</span>
                     </p>
                   </section>
                   <time class="rated_at">{{item.rated_at}}</time>
                 </header>
                 <ul class="food_img_ul">
                   <li v-for="(itemImg, indexImg) in item.item_ratings" :key="indexImg" @click.stop="showBigImg($event,item.item_ratings)">
                     <!-- 点击放大图片 -->
                 <!--   <big-img   :imgSrc='getImgPath(itemImg.image_hash)' :class="{'active':showBigImg}" :showme="showme"></big-img>-->
                     <img :src="getImgPath(itemImg.image_hash)" v-if="itemImg.image_hash"  >
                   </li>
                 </ul>
                 <ul class="food_name_ul">
                   <li v-for="(itemFood, indexFood) in item.item_ratings" :key="indexFood" class="ellipsis">
                     {{itemFood.food_name}}
                   </li>
                 </ul>
               </section>
             </li>
           </ul>
           <transition name="fade">
             <div class="specs_cover" @click="showFade" v-if="showBigImgF">
              <!-- <img :src="imgSrc">-->
               <!--<swiper :itemList=itemList loop=true></swiper>-->
               <swiper :options="swiperOption"  ref="mySwiper"  class="swiper-container">
                 <!-- 这部分放你要渲染的那些内容 -->
                 <swiper-slide  v-for="(item, index) in itemList" :key="index" class="swiper-slide food_types_container">
                   <figure>
                     <img :src="getImgPath(item.image_hash)" v-if="item.image_hash">
                     <figcaption class="food-name">{{item.food_name}}</figcaption>
                   </figure>
                 </swiper-slide>
                 <!-- 这是轮播的小圆点 -->
                 <div class="swiper-pagination swiper-pagination-center" slot="pagination"></div>
               </swiper>
             </div>
           </transition>
         </scroll>
       </div>

       <div class="loading-container" v-show="!ratingList.length || showLoading ">
         <loading></loading>
       </div>
     </section>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import {getRatingList} from 'src/service/getData'
import {hasClass,addClass,removeClass} from 'src/config/dom'
import {mapGetters,mapMutations} from 'vuex'
import {getImgPath} from 'src/components/common/mixin'
import {imgBaseUrl} from 'src/config/env'
import scroll from 'components/common/scroll/scroll'
/*import swiper from 'components/common/swiper/swiper'*/
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import loading from 'components/common/loading/loading'
  export default {
  mixins: [getImgPath],
  data(){
     return{
       showBigImgF:false,
       itemList:[],
       eventDom:'',
       rate1: 2,
       rate2: 3,
       showdom:false,
       ratingTageIndex: 0, //评价分类索引
       ratingOffset: 0, //评价获取数据offset值
       ratingTagName: '',//评论的类型
       ratingList:[],
       showLoading:false,
       preventRepeatRequest: false,// 防止多次触发数据请求
       scrollY:'',
       imgSrc:'',
       swiperOption: {
         //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
         notNextTick: true,
         pagination: '.swiper-pagination',
         slidesPerView: 'auto',
         centeredSlides: true,
         paginationClickable: true,
         spaceBetween: 30,
         onSlideChangeEnd: swiper => {
           //这个位置放swiper的回调方法
           this.page = swiper.realIndex+1;
           this.index = swiper.realIndex;
         }
       }
     }
   },
    props:[
      'shopDetailData','ratingScoresData','ratingTagsList','shopId'
    ],
     created(){
       this.listenScroll = true;
       this.pullup = true;
       this.probeType = 3;
       this.initRating();
     },
     mounted(){
       //坑！！！YDui这个评分插件只支持传入整数！，否则会警告验证数据不正确！
       this.rate1= Math.floor(this.ratingScoresData.service_score) ;
       this.rate2= Math.floor(this.ratingScoresData.food_score) ;
       //获取到数据在渲染，否则会导致组件传入数据警告
       this.showdom = true;
     },
     computed: {
       swiper() {
         return this.$refs.mySwiper.swiper;
       }
     },

     methods: {
       scrollFun(pos){
         this.scrollY = pos.y;
       },
       showFade(){
         removeClass(this.eventDom,"show")
         this.showBigImgF = false;
       },
       showBigImg(event,list){
        /* this.eventDom = event.target;*/
         this.itemList = list;
         if(hasClass(event.target,"show")){
        /*   removeClass(event.target,"show")*/
           this.showBigImgF = false;
         }else{
           this.showBigImgF = true;
         /*  this.imgSrc= this.eventDom.getAttribute("src")
           addClass(event.target,"show")*/
           //试图监听滚动高度，设置弹出图片高度定位，但是测试无效
           //  this.eventDom.style.top = Math.abs(this.scrollY)+20
         }
       },
       async initRating(){
         //评论详细列表
         this.ratingList = await getRatingList(this.shopId, this.ratingOffset);
       },
       async  changeTgeIndex(index, name){
         this.ratingTageIndex = index;
         this.ratingOffset = 0;
         let res = await getRatingList(this.shopId, this.ratingOffset, name);
       this.ratingList = [...res];
     },
    async loaderMore(){
      if (this.preventRepeatRequest) {
        return
      }
      this.preventRepeatRequest = true;
      this.showLoading = true;
      this.ratingOffset += 3;
      let moreRatings = await getRatingList(this.shopId, this.ratingOffset, this.ratingTagName);
     /* this.ratingList = [...this.ratingList,...ratingDate];*/
     this.ratingList = this.ratingList.concat(moreRatings);
      this.showLoading = false;
      if (moreRatings.length >= 3) {
        this.preventRepeatRequest = false;
      }else{
        this.preventRepeatRequest = true;
      }
    }
   },
   components:{
     swiper,
     swiperSlide,
     scroll,
     loading,
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../style/mixin';
.rating_container{
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  left: 0;
  height: 100%;
  p, span, li, time{
    font-family: Helvetica Neue,Tahoma,Arial;
  }
.scroll-container{
  display: flex;
  flex: 1;
  margin-top: 10px;
}
.rating-wrapper{
  width: 100%;
  max-height: 20rem;
/*  overflow: hidden;*/
}
  .show{
   /* 第一种方法，在原来的dom加入class*，操作dom/
/*    position: fixed;
    z-index: 999;
    left: 0;
    padding: .5rem;
    transition: all .3s;
    width: 100% !important;
    height: 15rem !important;*/

  }
  .specs_cover{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.4);
    z-index: 17;
    img{
      /*第二种方法，通过在蒙版显示，简单*/
      padding: .8rem;
      padding-top:2rem;
      width: 100%;
      height: auto;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
  .swiper-pagination-center{
    width: 100%;
    text-align: center;
    margin-bottom: .3rem;
    .swiper-pagination-bullet{
      margin: 0 4px;
    }

  }
  .food-name{
    paddting-top:.5rem;
    text-align: center;
    color: $fc;
  }
  .rating_header{
    display: flex;
    background-color: #fff;
    padding: .8rem .5rem;
    margin-bottom: 0.5rem;
    .rating_header_left{
      flex: 3;
      text-align: center;
      p:nth-of-type(1){
        @include sc(1.2rem, #f60);
      }
      p:nth-of-type(2){
        @include sc(.65rem, #666);
        margin-bottom: .1rem;
      }
      p:nth-of-type(3){
        @include sc(.4rem, #999);
      }
    }
    .rating_header_right{
      flex: 5;
      p{
        font-size: .65rem;
        line-height: 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        span:nth-of-type(1){
          color: #666;
          margin-right: .5rem;
        }
        .rating_num{
          @include sc(.55rem, #f60);
        }
        .delivery_time{
          @include sc(.4rem, #999);
        }
      }
    }
  }
  .tag_list_ul{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: .5rem;
    li{
      @include sc(.6rem, #6d7885);
      padding: .3rem .3rem;
      background-color: #ebf5ff;
      border-radius: 0.2rem;
      border: 1px;
      margin: 0 .4rem .2rem 0;
    }
    .unsatisfied{
      background-color: #f5f5f5;
      color: #aaa;
    }
    .tagActivity{
      background-color: #3190e8;
      color: #fff;
    }
  }
  .rating_list_ul{
    background-color: #fff;
    padding: 0 .5rem;
    .rating_list_li{
      border-top: 1px solid #f1f1f1;
      display: flex;
      padding: .6rem 0;
      .user_avatar{
        @include wh(1.5rem, 1.5rem);
        border: 0.025rem;
        border-radius: 50%;
        margin-right: .8rem;
      }
      .rating_list_details{
        flex: 1;
        header{
          display: flex;
          flex: 1;
          justify-content: space-between;
          margin-bottom: .3rem;
          .username_star{
            @include sc(.55rem, #666);
            .username{
              color: #666;
              margin-bottom: .2rem;
            }
            .star_desc{
              display: flex;
              align-items: center;
              .time_spent_desc{
                @include sc(.55rem, #666)
                margin-left: .15rem;
              }
            }
          }
          .rated_at{
            @include sc(.4rem, #999);
          }
        }
        .food_img_ul{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: .4rem;
          li{
            img{
              @include wh(3rem, 3rem);
              margin-right: .4rem;
              display: block;
            }
          }
        }
        .food_name_ul{
          display: flex;
          flex-wrap: wrap;
          li{
            @include sc(.55rem, #999);
            width: 2.2rem;
            padding: .2rem;
            border: 0.025rem solid #ebebeb;
            border-radius: 0.15rem;
            margin-right: .3rem;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
.yd-cell-item:not(:last-child):after {
  border-bottom: 0px solid #d9d9d9;
}

</style>
